Array & Object

快速回顧一下基本概念

• 陣列(Array)的索引值(index)從 0 開始

• null & undefined 沒有任何屬性值

• 因為物件是 create by reference, 所以即使兩個屬性跟值都相同的物件也不相同(Two objects with the same properties and values are not equal in JavaScript.)

• 取屬性值(Property)的方法有幾種
  Array[indexValue], Object["nameOfProperty"]
  Array.length, Object.nameOfProperty

Object["nameOfProperty"] 用於屬性值為字串或數字的場合，例如

const fishTank = {
    length: 60,
    width: 45,
    height: 30,
    "id number": 55681,
    2: "2025/09/09",
};

要取得 fishTank id number 跟 2 這個屬性，就要用 fishTank["id number"] 跟 fishTank["2"]

Create Array

建立陣列的方法

const buyList =[];
const buyList2 = new Array();

建立 length為Ｎ的空陣列

const newArray = Array(N);

建立從 0~正整數N 的陣列

const numberOfArray = Array.from(Array(N+1).keys());

Method of Array

• push -> 從陣列尾端添加

• pop -> 從陣列尾端移除，且會 return 該值

• unshift -> 從陣列開頭添加

• shift -> 從陣列開頭移除，且會 return 該值

• indexOf() 若沒有匹配 return -1

• slice(包含start ,不含end ) 會return新陣列，不會改變原陣列

• concat 將兩陣列合併

• join 回傳一個字串，該字串為由陣列轉字串的值，不會改變原本陣列

array1 = [1,3,5,7];
array.join(); // "1,3,5,7"
array.join(""); // 1357

Method Of Object

回傳物件上所有 property name 不是property value

Object.keys(nameOfObject)

Shallow Copy & Deep Copy Of Object

• Shallow copy
  Object.assign(targetObject , {...sources})
  因為是 shallow copy 所以其實 share same instance，
  原本的object如果屬性值被改變，複製出來的也會跟著改

• Deep copy
  JSON.parse() and JSON.stringify()
  但只能複製 primtive value (string, numbers, booleans, null)

const original = {
  a: 1,
  b: { c: 2 },
  d: [3, 4]
};

const deepCopy = JSON.parse(JSON.stringify(original));

• cloneDeep from Lodash

• structuredClone 多數現代瀏覽器支援
  https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone

const mushrooms1 = {
  amanita: ["muscaria", "virosa"],
};

const mushrooms2 = structuredClone(mushrooms1);

mushrooms2.amanita.push("pantherina");
mushrooms1.amanita.pop();

console.log(mushrooms2.amanita); // ["muscaria", "virosa", "pantherina"]
console.log(mushrooms1.amanita); // ["muscaria"]